<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 拍卖行信息</el-breadcrumb-item>
                <el-breadcrumb-item>基本信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-row>
                 <el-col :span="4"><div class="grid-content bg-purple">邮箱：</div></el-col>
                    <el-col :span="20"><div class="grid-content bg-purple-light">{{profile.user.email}}</div></el-col>
            </el-row>
            <el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple">名称：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{profile.user.name}}</div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple">网站：</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light">{{profile.user.website}}</div></el-col>
                </el-row>
            </el-row>
            <el-row>
                  <div v-for="(item,index) in profile.user.contact_users" class="marginTopSmall marginBottomSmall">
                    <span style="display: inline-block; width: 40px;" class="meebidVerticalAlignTop">{{getTitleLabel(item.titleId)}}</span>
                    <span style="display: inline-block; width: 150px;" class="meebidVerticalAlignTop">{{item.firstName}} {{item.lastName}}</span>
                    <span style="display: inline-block; width: 200px;" class="meebidVerticalAlignTop">
                      <span style="display: block">Phone 1: {{item.phone}}</span>
                      <span style="display: block" v-if="item.phone1 !== null && item.phone1 !== ''">Phone 2: {{item.phone1}}</span>
                      <span style="display: block" v-if="item.email !== null && item.email !== ''">Email: {{item.email}}</span>
                    </span>
                    <hr/>
                  </div>
            </el-row>
            <el-row :gutter="10" class="marginTopSmall">
                <el-col :span="8"><el-checkbox disabled checked><a :href="profile.user.blicenseUrl" target="_blank">营业执照</a></el-checkbox></el-col>
                <el-col :span="8"><el-checkbox disabled checked><a :href="profile.user.qualiDocUrl" target="_blank">拍卖行资质</a></el-checkbox></el-col>
                <el-col :span="8"><el-checkbox disabled checked><a :href="profile.user.idUrl" target="_blank">身份证明</a></el-checkbox></el-col>
            </el-row>
        </div>

        <div class="crumbs marginTopSmall">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 拍卖行信息</el-breadcrumb-item>
                <el-breadcrumb-item>地址信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-table
              :data="addresses"
              border
              style="width: 100%">
              <el-table-column
                label="Country/City/District"
                width="300">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{getRegionLabel(scope.row.regions)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="Address"
                >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{getRegionDetail(scope.row.detail)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="Type" prop="type" :formatter="addrTypeFormatter"
                width="140">
              </el-table-column>
            </el-table>
        </div>

        <el-row :gutter="20" v-if="profile.user.state==1">
            <el-col :span="12" :offset="6">
                <el-button class="marginTopSmall" type="primary" @click="handleStateChange(2)">同 意</el-button>
                <el-button class="marginTopSmall" type="danger" @click="handleStateChange(3)">拒 绝</el-button>
            </el-col>
        </el-row>
    </div>
</template>


<script>
import meebidUtils from "../../utils/meebidUtils";
export default {
  props: {
    houseId: 0,
    auditDone: Function
  },
  data() {
    return {
      profile: {
        user: {
          name: "",
          website: "",
          email: "",
          contact_users: []
        }
      },
      titleOptions: [],
      addresses: []
    };
  },
  mounted() {
    console.log(this.houseId);
    if (this.houseId == undefined || this.houseId <= 0) {
      return;
    }
    const self = this;
    self.$http.get("api/user/profile?userId=" + self.houseId).then(res => {
      if (res.data.code != 1) {
        self.$message.error(res.data.msg);
        return;
      }
      self.profile = res.data.content;
      self.titleOptions = res.data.titles;
    });
    self.$http
      .get(
        "api/mgr/addresses?userId=" +
          self.houseId +
          "&type=" +
          ((1 << 8) - 1 - 2) +
          "&offset=0&count=20"
      )
      .then(res => {
        if (res.data.code != 1) {
          self.$message.error(res.data.msg);
          return;
        }
        self.addresses = res.data.content.addresses;
      });
  },
  methods: {
    getTitleLabel(titleId) {
      if (this.titleOptions == undefined) return "";
      for (var i = 0; i < this.titleOptions.length; i++) {
        if (titleId === this.titleOptions[i].id) {
          return this.titleOptions[i].name;
        }
      }
      return "";
    },
    getRegionDetail(detail){
      var detailLabel = "";
      var detailList = detail && detail.length ? detail : [];
      for (var i = 0; i < detailList.length; i++){
        if (detailList[i].controlType === 'select') {
          var detailOption = meebidUtils.findObject(detailList[i].options, "id", detailList[i].value);
          if (detailOption) {
            detailLabel += detailOption.label ? detailOption.label + " " : detailOption.name + " ";
          } else {
            console.log("Incorrect address get: " + detailList[i].field);
          }          
        } else {
          detailLabel += detailList[i].value ? detailList[i].value + " " : "";
        }
      }
      return detailLabel;
    },
    getRegionLabel(regions) {
      var regionLabel = "";
      for (var i = 0; i < regions.length; i++) {
        if (i !== regions.length - 1) {
          regionLabel += regions[i].label + "/";
        } else {
          regionLabel += regions[i].label;
        }
      }
      return regionLabel;
    },
    addrTypeFormatter(row, column) {
      var ex = "";
      var tp = row.type;
      if (row.type % 2 == 1) {
        ex = "(默认)";
        tp -= 1;
      }
      switch (tp) {
        case 2:
          return "联系人地址" + ex;
        case 4:
          return "物理地址" + ex;
        case 8:
          return "账单地址" + ex;
        case 16:
          return "收货地址" + ex;
        case 32:
          return "展览地址" + ex;
        case 64:
          return "拍卖地址" + ex;
        case 128:
          return "取货地址" + ex;
      }
      return "未知";
    },
    showChecked(url) {
      if (url == null || url.length <= 0) {
        return false;
      }
      return true;
    },
    handleStateChange(houseState) {
      console.log(this.houseId);
      const self = this;
      self.$http
        .post(
          "api/mgr/house/audit",
          JSON.stringify({ houseId: self.houseId, state: houseState })
        )
        .then(res => {
          if (res.data.code != 1) {
            self.$message.error(res.data.msg);
            return;
          }
          if (self.auditDone != undefined) {
            self.auditDone(houseState == 2);
          }
          self.profile.user.state = houseState;
        });
    }
  }
};
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding-left: 10px;
  vertical-align: middle;
  line-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.marginTopSmall {
  margin-top: 10px;
}
.marginBottomSmall {
  margin-bottom: 10px;
}
.meebidVerticalAlignTop {
  vertical-align: top;
}
</style>
